window.addEventListener('load', function() {
    //    1.功能一 鼠标经过左右箭头出现 移开隐藏
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var mybanner = document.querySelector(".mybanner");
    var imgw = document.querySelector("img").offsetWidth;
    mybanner.addEventListener('mouseenter', function() {
        prev.style.display = 'block';
        next.style.display = 'block';
    })
    mybanner.addEventListener('mouseleave', function() {
            prev.style.display = 'none';
            next.style.display = 'none';
        })
        //给图片 绑定移动动画
    function animate_2(obj, target, callback) {
        clearInterval(obj.timer); //pi'mia避免一个obj绑定多个定时器

        obj.timer = setInterval(function() { //给具体obj绑定定时器 节省空间
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
            if (callback) {
                callback();
            }
        }, 30);

    }
    var ul = document.querySelector(".circle-list");
    var ul_2 = document.querySelector('.hot');
    var children = ul.children;
    for (var i = 0; i < children.length; i++) { //这个循环很重要 给每个li绑定点击事件
        children[i].addEventListener('click', function() {
            for (var j = 0; j < children.length; j++) {
                children[j].className = 'circle';
            }
            this.className = 'circle active';
            var index = this.getAttribute('data-n');
            // num = index;
            console.log(index);



            animate_2(ul_2, -index * imgw);
        })

    }
    //给右边按钮添加一个点击事件
    var first = ul_2.children[0].cloneNode(true);
    ul_2.appendChild(first);
    var num = 0;
    var circle = 0;
    next.addEventListener('click', function() {
            if (num == ul_2.children.length - 1) {
                ul_2.style.left = 0;
                num = 0;
            }
            num++;
            animate_2(ul_2, -num * imgw)
            circle++;
            if (circle == children.length) {
                circle = 0;
            }
            for (var j = 0; j < children.length; j++) {
                children[j].className = 'circle';
            }
            children[circle].className = 'circle active';
        })
        //小圆点对应改变

})